<template>
  <div class="electronics">
    <table width="100%" height="600px">
      <tr>
        <td rowspan="2">
          <img
            style="height: 700px; width: 200px; margin: 0px 10px 0px 0px"
            src="https://img.alicdn.com/tps/i4/TB1unHOjZieb18jSZFvwu1I3FXa.png"
          />
        </td>
        <td
          v-for="(item, index) in goods_first"
          :key="index"
          @click="goToGoodsDetail(item.id)"
        >
          <div class="goods">
            <el-card shadow="hover" :body-style="{ padding: '20px' }">
              <img class="image" :src="item.img_url" />

              <div class="describe-warp">
                <span class="describe">{{ item.describe }}</span>
              </div>
              <div class="price-warp">
                <span class="selling-price">￥{{ item.selling_price }}</span>
                <span class="original-price">￥{{ item.original_price }}</span>
              </div>
            </el-card>
          </div>
        </td>
      </tr>
      <tr>
        <td
          v-for="(item, index) in goods_second"
          :key="index"
          @click="goToGoodsDetail(item.id)"
        >
          <div class="goods">
            <el-card shadow="hover" :body-style="{ padding: '20px' }">
              <img class="image" :src="item.img_url" />

              <div class="describe-warp">
                <span class="describe">
                  {{ item.describe }}
                </span>
              </div>
              <div class="price-warp">
                <span class="selling-price">￥{{ item.selling_price }}</span>
                <span class="original-price">￥{{ item.original_price }}</span>
              </div>
            </el-card>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods_first: [
        {
          img_url:
            "https://img.alicdn.com/imgextra/i1/2616970884/O1CN01MTGI1d1IOukeph1Kc_!!0-item_pic.jpg_430x430q90.jpg",
          describe:
            "【双11预售 24期免息】 Apple/苹果 iPhone 12 Pro Max Apple/苹果 iPhone 12 ",
          selling_price: "9299.00",
          original_price: "11899.00",
        },
        {
          img_url:
            "http://img.alicdn.com/imgextra/i1/1917047079/O1CN01Lb5xPe22AENeJ2BUW_!!2-item_pic.png",
          describe:
            "【双11预售 24期免息】 Apple/苹果 iPhone 12 Pro Max Apple/苹果 iPhone 12 ",
          selling_price: "9299.00",
          original_price: "11899.00",
        },
        {
          img_url:
            "https://img.alicdn.com/imgextra/i3/2616970884/O1CN01ybraAp1IOulilijTl_!!0-item_pic.jpg",
          describe:
            "【限时享12期免息】Apple/苹果 iPhone 12 全网通5G新品智能手机苏宁易购官方旗舰正品",
          selling_price: "9299.00",
          original_price: "11899.00",
        },
        {
          img_url:
            "https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i4/45646959/O1CN012KhkJo21HGrvf24BD_!!0-saturn_solar.jpg",
          describe:
            "【当天发货/送快充头】Apple/苹果 iPhone 12 Pro Max 5G手机国行正品官方旗舰店",
          selling_price: "9299.00",
          original_price: "11899.00",
        },
      ],
      goods_second: [
        {
          img_url:
            "https://img.alicdn.com/imgextra/i2/2088045547/O1CN01mpCIjN1qqZcfDgtXX_!!2088045547.jpg",
          describe:
            "【当天发货24期分期】Huawei/华为Mate 40 Pro5G新品手机nova7官方p40pro直降旗舰店mate40+",
          selling_price: "7299.00",
          original_price: "8099.00",
        },
        {
          img_url:
            "https://img.alicdn.com/imgextra/i3/2088045547/O1CN01bqbIJs1qqZcbzYrPd_!!2088045547.jpg",
          describe:
            "【6期免息】xiaomi/小米10 5G手机官方旗舰店k30s至尊版骁龙865直降红米note9pro官网10青春版新品9a正品10x",
          selling_price: "3799.00",
          original_price: "4599.00",
        },
        {
          img_url:
            "https://img.alicdn.com/imgextra/i4/883737303/O1CN013DjeoJ23op77G6ZaY_!!883737303.jpg",
          describe:
            "【21日享12期免息再减300】vivo X50双模5G智能手机官方旗舰店官网正品vivoX50全新限量版x30 x27 s6 x50pro",
          selling_price: "3498.00",
          original_price: "4697.00",
        },
        {
          img_url:
            "https://img.alicdn.com/imgextra/i1/2256022143/O1CN012Vr2nq1RhXPmNEbg4_!!2256022143.jpg",
          describe:
            "【24期免息 领券立减600元】一加 OnePlus 8 Pro 5G旗舰 2K+120Hz 柔性屏骁龙865 一加官方旗舰店   一加官方旗舰店",
          selling_price: "5399.00",
          original_price: "5999.00",
        },
      ],
    };
  },
  methods: {
    goToGoodsDetail(id) {
      //带参数跳转
      // 使用 push - params 方式传递参数，参数将不会在地址栏中显示
      this.$router.push({ name: "商品", params: { goodsID: id } });
    },
  },
};
</script>

<style>
.electronics {
  margin: 20px 0px;
}
</style>
